<template>
    <el-dialog
        class="dialog"
        :destroy-on-close="true"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
                <el-form-item label="姓名" prop="user_xm">
                    <div class="box-row">
                    <el-input
                        v-model="formData.user_xm"
                        placeholder="请输入姓名"
                        maxlength="20"
                    ></el-input>
                    <el-select v-model="formData.user_xb" placeholder="请选择性别">
                        <el-option
                            v-for="item in sexData"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                </el-form-item>
                <el-form-item label="手机号/帐号" prop="phone">
                    <el-input
                        v-model="formData.phone"
                        placeholder="请输入手机号/帐号"
                        maxlength="11"
                        :disabled="isEdit"
                    ></el-input>
                </el-form-item>
                
                <el-form-item label="岗位" prop="staff_post">
                    <el-input
                    v-model="formData.staff_post"
                    placeholder="请输入岗位名称"
                    maxlength="20"
                ></el-input>
                </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="onDialogClose">取消</el-button>
            <el-button type="primary" @click="onSubmit">确认</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter, State } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import uxInputTree from "@/components/input/tree";
@Component({
    mixins: [mixinDialogForm],
    components: { uxInputTree }
})
export default class purviewStaffEdit extends Vue {
    // 新增
    @Action("purviewStaff/add") itemAdd: any;
    // 编辑
    @Action("purviewStaff/edit") itemEdit: any;

    @Action("purviewDepartment/tree") getDepartment: any;
    @Getter("purviewDepartment/tree") departmentData: any;
    @State((state) => state.sharing.sex) sexData: any;
    addInit() {
        const me = this as any;
        me.formData.staff_post = '';
    }
    editInit(data: any) {
        const me = this as any;
        data.user_xb = data.user_xb.toString();
        me.formData = Object.assign({}, me.formData, data);
    }
    isnoData: any = [
        {}
    ];
    created() {
        this.getDepartment();
    }
    selectParams: object = {
        clearable: true,
        placeholder: "请选择所属部门"
    };

    // 表单数据
    formData: any = {
        section_sn: "",
        id_card: "",
        user_xb: "1",
        user_xm: "",
        staff_post: "",
        job_number: "",
        door_manager: "",
        phone: "",
        email: "",
        door_card: "",
        door_pwd: "",
        face_thumb: "",
        door_qrcode: "2"
    };

    rules: any = {
        user_xb: [
            {
                required: true,
                message: "请选择性别"
            }
        ],
        user_xm: [
            {
                required: true,
                message: "请输入姓名",
                trigger: "blur"
            }
        ],
        phone: [
            {
                required: true,
                message: "输入手机号/帐号",
                trigger: "blur"
            }
        ]
    };
    // 标题
    get title() {
        const title = (this as any).isEdit ? "编辑" : "新增";
        return `${title}员工`;
    }
    treeParams: any = {
        clickParent: true,
        props: {
            children: "children",
            label: "section_name",
            value: "section_sn"
        }
    };
}
</script>